<template>
    <div>
        <h1>layout</h1>
    </div>
    <div>
        <button @click="add">添加按钮</button>
        <button @click="del">删除按钮</button>
        <button @click="addrow">添加一行</button>
    </div>
    <div>
        <div class="keyboard_background">
            <div class="row" v-for="(item,index) in keyboard_json.keyboard" :key="index">
                <key @click="selected_key" v-for="(keydata,keyindex) in item" :key="keyindex" :keydata="keydata" :row="index" :column="keyindex"></key>
            </div>
        </div>
    </div>
    <div v-for="(item,index) in keyboard_json.keyboard[selected_row][selected_column]">
        <div>
            {{ pro_map[index] }}<input v-model="keyboard_json.keyboard[selected_row][selected_column].keystr">
        </div>
    </div>
</template>

<script setup>
    import key from '../components/key.vue'
    import {ref} from 'vue'
    const pro_map=ref({
        "keystr":"字符"
    })
    const selected_row=ref(0)
    const selected_column=ref(0)
    const keyboard_json=ref({
        keyboard:[
            [
                {
                    "keystr":"A"
                },
                {
                    "keystr":"B"
                },
                {
                    "keystr":"C"
                }
            ]
        ]
    })
    function add(){
        console.log(keyboard_json.value.keyboard[selected_row.value])
        keyboard_json.value.keyboard[selected_row.value].splice(selected_column.value+1,0,{
            "keystr":""
        })
        selected_column.value+=1
    }
    function del(){
        keyboard_json.value.keyboard[selected_row.value].splice(selected_column.value,1)
        if(selected_column.value>0)
            selected_column.value-=1
        else{
            selected_column.value=0
            selected_row.value=0
        }
    }
    function addrow(){
        keyboard_json.value.keyboard.splice(selected_row.value+1,0,[
            {
                "keystr":""
            }
        ])
        selected_row.value+=1
        selected_column.value=0
    }
    function selected_key(row,column){
        selected_column.value=column
        selected_row.value=row
    }
</script>
<style>
.keyboard_background {
    background-color: #898686;
    display: flex;
    flex-direction: column;
}
.row{
    display: flex;
    flex-direction: row;
}
.key {
    width: 70px;
    height: 70px;
    background-color: aliceblue;
    border: solid 1px black;
}

.key div {
    color: white;
    margin: 10px;
    width: 50px;
    height: 50px;
    border: solid 1px black;
}
</style>